<!-- 系统维护 - 菜单管理 -->
<div class="layuimini-container">
	
	<div class="layuimini-main" style="padding:0 4px;">
		<!-- 定义数据表格 -->
		<table class="layui-hide" id="menuManagementTable" lay-filter="menuManagementFilter"></table>
	</div>

	<!-- 定义表格头部按钮组 -->
	<script type="text/html" id="menuManagementToolbar">
		<div class="layui-btn-container">
			<button class="layui-btn" lay-event="add"><i class="fa fa-pencil"></i> 新增菜单 </button>
		</div>
	</script>

	<!-- 定义表格按钮：修改、删除 -->
	<script type="text/html" id="menuManagementTableBar">
		<div class="layui-btn-group">
			<button type="button" class="layui-btn layui-btn-sm" lay-event="edit">修改</button>
			<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
		</div>
	</script>
</div>


<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<script>
	//引用
	layui.use(['form', 'table', 'miniPage', 'element','layer'], function() {
		//初始化声明
		var $ = layui.jquery,
			form = layui.form, //将layui中的form组件对象定义成form
			table = layui.table,
			miniPage = layui.miniPage,
			layer = layui.layer;

		window.initMenu=function(){
			var Data=null;
			$.ajax({
				url : 'http://localhost:8006/sccMenu/no',
				type : 'get',
				async : false,
				success: function(result){
					Data=result.data;
				}
			});
			return Data;
		}
		
		//渲染form表示，否则select显示有问题
		//注意：使用<form>表单标签的要进行渲染
		form.render();

		//对table进行初始化渲染
		table.render({
			elem: '#menuManagementTable',
			url: 'http://localhost:8006/sccMenu', 
			toolbar: '#menuManagementToolbar',
			defaultToolbar: [],
			cols: [
				[ //字段，表头
					{field: 'menuId', title: 'ID', align:'center', width: '5%'},
					{field: 'menuName',title: '菜单名称', align:'center'},
					{field: 'url',title: '路径', width: '35%'},
					{field: 'type',title: '类型', sort: true, align:'center',
						templet : function(d){
							return d.type == 'item' ? '菜单':'文件夹';
						}
					},
					{field: 'remark',title: '备注'}, 
					{title: '操作',
						toolbar: '#menuManagementTableBar',
						align: "center"
					}
				]
			],
			page: true,
			limits: [10, 20, 30],
			limit: 10,
			skin: 'line'
		});

//初2：一级菜单
				// var parentMenuData = [
				// 	{'menuId': 4, 'menuName':'检测记录管理'},
				// 	{'menuId': 5, 'menuName':'报表管理'},
				// 	{'menuId': 6, 'menuName':'连锁药房管理'},
				// 	{'menuId': 7, 'menuName':'系统账号管理'},
				// 	{'menuId': 8, 'menuName':'系统维护'},
				// 	{'menuId': 9, 'menuName':'个人中心'}
				// ];
				
		/**
		 * toolbar事件监听
		 */
		table.on('toolbar(menuManagementFilter)', function(obj) {
			if (obj.event === 'add') {
				//初始化字典数据
				//初1：菜单类型
				// var menuTypeData = ['菜单','路径'];
				
				var content = miniPage.getHrefContent('page/table/add-menu.html'); //加载页面
				var openWH = miniPage.getOpenWidthHeight();

				//定义弹出层
				var index = layer.open({
					title: '新增菜单信息',
					type: 1,
					shade: 0.2,
					maxmin: false, //弹出层，最小化和最大化的按钮
					shadeClose: true, //关闭
					area: [openWH[0]-50 + 'px', openWH[1]-50 + 'px'],	//弹出窗尺寸
					offset: [openWH[2] + 'px', openWH[3] + 'px'],	//弹出窗x,y位置
					content: content, //弹出层的内容
					success: function(layero, index){	// 成功弹出后回调
						//为控件绑定初始化数据
						
						//菜单类型
						let parentMenuHtml = '<option value="0">-- 一级菜单 --</option>';
						initMenu().forEach(function(_item){
							parentMenuHtml += '<option value="'+ _item.menuId +'">'+_item.menuName+'</option>';
						});
						$(layero).find("select[name='pid']").html(parentMenuHtml);
						form.render("select");
					}
				});
			}
			return false;
		});

	
		
		
		//监听修改和删除
		table.on('tool(menuManagementFilter)', function(obj) {
			//获得当前行数据
			var data = obj.data;
			
			if (obj.event === 'edit') { //编辑事件
				var content = miniPage.getHrefContent('page/table/edit-menu.html');
				var openWH = miniPage.getOpenWidthHeight();
				var index = layer.open({
					title: '修改菜单信息',
					type: 1,
					shade: 0.2,
					maxmin: false,
					shadeClose: true,
					// area: [openWH[0]-50 + 'px', openWH[1]-50 + 'px'],
					area: [openWH[0]-50 + 'px', openWH[1]-50 + 'px'],	//弹出窗尺寸
					offset: [openWH[2] + 'px', openWH[3] + 'px'],	//弹出窗x,y位置
					content: content,  //弹出层内容
					success: function(layero, index){	// 成功弹出后回调
						//设置编辑页面控件value
						$(layero).find("input[name='menuId']").val(data.menuId);
						$(layero).find("input[name='menuName']").val(data.menuName);
						//菜单路径
						$(layero).find("input[name='url']").val(data.url);
						//菜单类型
						$(layero).find("input[name='type'][value='item']").attr("checked", data.type == 'item' ? true : false);
						$(layero).find("input[name='type'][value='folder']").attr("checked", data.type == 'folder' ? true : false);
						
						
						//菜单类型
						let parentMenuHtml = '<option value="0">-- 一级菜单 --</option>';
						initMenu().forEach(function(_item){
							parentMenuHtml += '<option value="'+ _item.menuId +'"';
							if (_item.menuId == data.pid) {
								parentMenuHtml += ' selected ';
							}
							parentMenuHtml += '>'+_item.menuName+'</option>';
						});
						$(layero).find("select[name='pid']").html(parentMenuHtml);
						
						//备注
						$(layero).find("input[name='remark']").val(data.remark);
						form.render(); //更新全部
					}
					// yes:function(index, layero){
						// 保存按钮回调函数
					// 	console.log('保存');
					// }
				});

				//窗口最大化
				// $(window).on("resize", function() {
				// 	layer.full(index);
				// });

				return false;

			} else if (obj.event === 'delete') { //删除
				//弹出框
				layer.confirm('确定删除记录？', function(index) {
					console.log(data.menuId);
					
					//TODO:请求后端接口进行删除操作
					$.ajax({
						url : 'http://localhost:8006/sccMenu/' + data.menuId,
						type : 'delete',
						success: function(result){
							console.log(result);
							//关闭确认消息框
							layer.close(index);
							//TODO:刷新table,重新加载
							table.reload('menuManagementTable');
						},
						error: function(result){
							console.log(result);
						}
					});
				});
				return false;
			}
		});

	});
</script>
